<template>
  <ContentField>
    <!-- 对局信息 -->
    <div class="card-body">
      <table class="table table-striped table-hover">
        <thead>
        <tr>
          <td>头像</td>
          <td>用户</td>
          <td>分数</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>
            <img :src="user.photo" alt="照片" class="user_photo">
          </td>
          <td>
            <span>{{ user.username }}</span>
          </td>
          <td>
            <span>{{ user.rating }}</span>
          </td>
        </tr>
        </tbody>
      </table>
      <!--内容分页-->
      <nav aria-label="Page navigation example">
        <ul class="pagination justify-content-center">
          <li class="page-item" @click="click_page(-2)">
            <a class="page-link" href="#" aria-label="Previous">
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
          <li :class="'page-item ' + page.is_active" v-for="page of pages" :key="page.number"
              @click="click_page(page.number)">
            <a class="page-link" href="#">{{ page.number }}</a>
          </li>
          <li class="page-item" @click="click_page(-1)">
            <a class="page-link" href="#" aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </ContentField>
</template>

<script>
import ContentField from "@/components/ContentField";
import $ from 'jquery';
import {useStore} from 'vuex';
import {ref} from 'vue';

export default {
  name: "RandListIndexView",
  components: {
    ContentField
  }, setup() {

    let store = new useStore();
    let users = ref([]);            //存储数据
    let current_page = 1;           //当前页
    let total_users = 0;            //总数据
    let pages = ref([]);            //页面展示数据

    //获取当前分页要展示的数字
    const click_page = (number) => {
      if (number === -1) number = current_page + 1;
      else if (number === -2) number = current_page - 1;

      //覆盖原页面
      let total_page = parseInt(Math.ceil(total_users / 3));
      if (number >= 1 && number <= total_page) {
        current_page = number;
        refresh_records(current_page);
      }
    }

    //获取分页展示的数字
    const update_page = () => {
      let total_page = parseInt(Math.ceil(total_users / 3));
      let new_pages = [];
      for (let i = current_page - 2; i <= current_page + 2; i++) {
        if (i >= 1 && i <= total_page)
          new_pages.push({
            number: i,
            is_active: i === current_page ? 'active' : ''
          })
      }
      pages.value = new_pages;
    }

    //获取record对局列表
    const refresh_records = (page) => {
      $.ajax({
        url: '/api/ranklist/getList/',
        type: 'get',
        data: {
          page: page
        },
        headers: {
          Authorization: 'Bearer ' + store.state.user.token
        },
        success(resp) {
          users.value = resp.users;         //返回的数据也是列表,所以直接赋值
          total_users = resp.users_total;
          update_page();                        //更新页面有几页数据
          // console.log(records.value);
        }, error(resp) {
          console.log(resp);
        }
      })
    }
    //刷新首页
    refresh_records(current_page);


    return {
      refresh_records,
      update_page,
      click_page,
      users,
      pages
    }
  }
}
</script>

<style scoped>
img.user_photo {
  border-radius: 50%;
  width: 7vh;
}

div {
  text-align: center;
}
</style>